<template>
    <div class="container">
      <div class="left">
        <div class="left-top">
          <Pie></Pie>
        </div>
        <div class="left-middle">
          <Gauge/>
        </div>
        <div class="left-bottom">
          <SexPie/>
        </div>
      </div>
      <div class="center">
        <div class="center-top">
          <div class="item" style="height: 100%;width: 100%">
            <e-digital-flop color="#000" :value="this.inputNum"/>已录入数据人数
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <e-digital-flop color="#000" :value="2176"/>学生总数
            <e-digital-flop color="#000" :value="this.classNum"/>班级数量
            <e-digital-flop color="#000" :value="this.majorNum"/>专业数量
          </div>
        </div>
        <div class="center-bottom">
          <map_1></map_1>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <Scatter></Scatter>
        </div>
        <div class="right-middle">
          <div class="item" style="height: 100%;width: 100%">
            <ScrollBoard></ScrollBoard>
          </div>
        </div>
        <div class="right-bottom">
          <div class="item" style="height: 100%;width: 100%"></div>
        </div>
      </div>
    </div>

</template>

<script>
import request from "@/util/request.js";
import * as echarts from "echarts";
import {EDigitalFlop, EFullScreenContainer} from "e-datav-vue3";
import Map_1 from "@/component/Map.vue";
import Pie from "@/component/Pie.vue";
import Gauge from "@/component/Gauge.vue";
import Header from "@/component/Header.vue";
import SexPie from "@/component/SexPie.vue";
import Scatter from "@/component/Scatter.vue";
import ScrollBoard from "@/component/ScrollBoard.vue";
export default {
  name: "echartsBox",
  components: {ScrollBoard, Header, Pie,EDigitalFlop, Map_1,Gauge,SexPie,Scatter, EFullScreenContainer},

  data(){
    return{
      inputNum:0,
      classNum:0,
      majorNum:0,
    }
  },
  mounted() {
    this.getCount()
  },

  methods:{
    getCount(){
      request.get("/info_account/getCount").then(res=>{
        this.inputNum=res.data.data
      })
      request.get("/info_major/getCount").then(res=>{
        this.majorNum=res.data.data
      })
      request.get("/info_class/getCount").then(res=>{
        this.classNum=res.data.data
      })
    },

  },
};

</script>

<style scoped>
.container {
  display: flex;
  width: 99vw;
  height: 87vh;
}

.left, .right {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.left > div, .center > div, .right > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.center-top {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20%;
}

.center-bottom {
  flex-grow: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
}

.left-top {
  height: 33%;

}

.left-middle {
  height: 33%;
}

.left-bottom {
  height: 33%;
}

.right-top {
  height: 33%;
}

.right-middle {
  height: 33%;
}

.right-bottom {
  height: 33%;
}

.container p {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

.item {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  background: linear-gradient(to left, #000000, #000000) left top no-repeat,
  linear-gradient(to bottom, #000000, #000000) left top no-repeat,
  linear-gradient(to left, #000000, #000000) right top no-repeat,
  linear-gradient(to bottom, #000000, #000000) right top no-repeat,
  linear-gradient(to left, #000000, #000000) left bottom no-repeat,
  linear-gradient(to bottom, #000000, #000000) left bottom no-repeat,
  linear-gradient(to left, #000000, #000000) right bottom no-repeat,
  linear-gradient(to left, #000000, #000000) right bottom no-repeat;
  background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
  border: 1px solid rgba(30, 29, 29, 0.8);
  position: relative;
}
</style>
